Pada kali ini pada tutorial 45 pernah menjlaskan blocState management 
Pada tutorial tersebut buat aplikasi seperti ini 
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< 
import 
import 
import r loc.dart'; 


void main() => runApp(MyApp( )): 


class MyApp extends Statel Widget 
@override 
Widget build(BuildContext context) | 
return MaterialApp( 
home: BlocProvidercColorBloc?» 
builder: (context) => ColorBloc(), child: MainPagel) 
); Materi o 
} 


class MainPage extends StatelessWidget 
override 
Widget build(BuildContext context) { 


Calainn hlan — Daun dna ALA auni anal anantaue Y e 


[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 

[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 


1 e) lw Fs 0 
Ada animatedContainer dan 2 tombol ketika di tekan maka akan berubah warna 
animatedContainer 

Sekarang permasalahanya adalah 

Ketika di close aplikasi ini lalu buka lagi 

State terahir kali itu warna biru ketika di buka lagi jadi kuning 
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import 
import 
import '« r loc.dart'; 


void main = runApp(NyApp( )): 


class MyApp extends StatelessWidget 
@doverride 
Widget build(BuildContext context) { 
return MaterialApp( 
home: BlocProvider&ColorBloc? 
builder: (context) => ColorBloc(), child: MainPagel) 
); M ialApp 
} 


class MainPage extends StatelessWidget 
override 
Widget build(BuildContext context) { 


Pel nm an hlar - DlacNuanidan afsflalauBIanan 


[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 

[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 


00:51 10:14 


I ep a Fs 0 
Dia kembali ke awal yaitu warna ember 


Pada kali ini menjelaskan mengunakan hydrated Bloc 

hydrated Bloc ini ssebernya blocState management tapi versi sudah di uprade 
hydrated Bloc dia dapat menyimpan state terakhir kita otomatis 

ketika buka dia akan load lagi state terakhir 

misalkan state terakhir kali di buka warna biru 

dan buka lagi maka menjadi biru 

pada kali ini tidak buat dari 0 

tapi melanjutkan tutorial ini 
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2 
KS 
BLoC dengan flutter_bloc 
F 
ta 


main = runApp 


build context 
return ( 
home: « » 
—builder: (context) = 
LAp 


build context 


hiana afas, 


[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 

[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 


TN am t Solz ME | 
Pertama ke pubspec yml dulu 

Gunkan flutter bloc 20 kita ubah menjadi 21.0 

Lalu tambhakn lagi package hydrated bloc 
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version: 


environment: 
sdk: 


dependencies: 
flutter: 
sdk: 


cupertino_icons: 
flutter_bloc: 
hydrated_bloc: 


dev_dependencies: 
flutter_test: 
sdk: 


Lutut utut tutter paLnageI 
Running "flutter pub get" 
exit code 0 

[bloc_blocflutterpackage] 
Running "flutter pub get" 
exit code 0 

[bloc_blocflutterpackage] 


02:24 
b mam DU SSM 


Kalau sudah masuk ke class color 


stutte: paLnaged get 


in bloc blocflutterpackage ... 


flutter packages get 
in bloc blocflutterpackage ... 


flutter packages get 


bloc 


Sebelumnya sudah membuat seperti ini 
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& color biocdart 
1mport 
import 


enum ColorEvent to_amber, to_light_blue 


class ColorBloc extends Bloc<ColorEvent, Color> 
Color color = Colors.amber; 


override 


Color get initialState => Colors.amber; 


@override 


Stream<Color> mapEventToState(ColorEvent event) async* { 


color = (event = ColorEvent.to amber) ? Colors.amber : 


yield color, 


} 


[bloc_blocflutterpackage] 
Running "flutter pub get" 
exit code 0 
[bloc_blocflutterpackage] 
Running "flutter pub get" 
exit code 0 


02:38 
Di rela i Sa 


flutter packages get 
in bloc blocflutterpackage ... 


flutter packages get 
in bloc blocflutterpackage ... 


Sebelum nya lanjut menjelaskan hydrated bloc 
Ingin memberitahukan mengunakan bloc dart kita tidak perlu lagi 
Memiliki satu buat yield untuk menyimpan state kita contoh yg color ini tidak perlu 


lagi disimpan 


Colors.lightBlue: 
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& clor biocdart 
import 
import f al.d ; 


enum ColorEvent to_amber, to_light_blue 


class ColorBloc extends Bloc<ColorEvent, Color> 
7 .| Color color = Colors.amber; 


override 
Color get initialState => Colors.amber; 


override 

Stream<Color> mapEventToState(ColorEvent event) async* { 
-color = (event = ColorEvent.to_amber) ? Colors.amber : Colors.lightBlue, 
yield _color; 

} 


[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 

[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 


mi Ka D Fisik “A 
Kita hapus 

Dia akan disimpan secara otomatis oleh state didalam class bloc 

Nanti akan diturunan clas kita kedalam colors bloc 

Colors bloc ini kita inherinte dari clas bloc 

Disimpan dibloc itu ketika diupdate ketika diberikan stream 

Jadi disini kita hapus langsung ke yield 
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import 
import € f itt .d H 


enum ColorEvent to amber, to light blue 


class ColorBloc extends Bloc&ColorEvent, Color» 
override 
Color get initialState => Colors.amber; 


override 
Stream<Color> mapEventToState(ColorEvent event) async* { 
yield (event = ColorEvent.to amber) ? Colors.amber : Colors.lightBlue; 


} 


[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc blocflutterpackage ... 
exit code 0 

[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc blocflutterpackage ... 
exit code 0 


T) amp cal (sisix ea 
Jadi maka akan kembalikan kedalam stream yg ini 
Selain kembalikan kedalam stream ini akan di update 


State yg disimpan class dari bloc kita 
Bisa dilihat keterangan nya disni 
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& olor bicdart © 
import 
import ckag i ial.dart'; 


enum ColorEvent Stream<Color> mapEventToState(ColorEvent event) 
package:bloc_blocflutterpackage/color_bloc.da 
class ColorBloc pt 
override 


. .. Must be implemented when a class extends 
Color get init 


[Bloc]. Takes the incoming 


. argument 
@doverride k 


. P SARS 
Stream<Color> mapEventToState(ColorEvent event) async* ( 
yield (event — ColorEvent.to amber) ? Colors.amber : Colors.lightBlue; 


} 


[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 

Ibloc blocflutterpackage) flutter packages get 

Running "flutter pub get" in bloc blocflutterpackage ... 
exit code 0 


03:44 10:14 


IN al Tw Fs MP | 
Jadi nanti ada new state yg ini 

Kita coba dulu run kan 

Ini ditekan 
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& clor bibedart 
import 
import € f ] .d H 


enum ColorEvent to amber, to light blue 


class ColorBloc extends BlocsColorEvent, Color?» 
@override 
Color get initialState = Colors.amberj 


@override 
StreamcColor» mapEventToState(ColorEvent event) async* { 
yield (event — ColorEvent.to amber) ? Colors.amber : Colo 


} 


CALL tuuc v 


[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 

[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 


T) tempa cw Se a 
Maka sama saja gk perlu lagi disimpan sebuah yield 

Kembali lagi pertama2 kita lakukan adalah mengubah bloc ini menjadi hydrated 
bloc 


Jadi gk gk exteds ke bloc lagi tapi hydrated bloc 

Kita import dahulu 

hydrated bloc 

ini punya berapa method masih punya untuk kita overead 
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& color biocat © 
import 
import 
import 


enum ColorEvent to_amber, to_light_blue 


class ColorBloc extends HydratedBloc<ColorEvent, Color> 
Create 2 misang ovemdets) 


alState => Colors.amber; 


override 
Stream<Color> mapEventToState(ColorEvent event) async* { 
yield (event = ColorEvent.to amber) ? Colors.amber : Colors.lightBlue; 


} 


[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 

[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 


Crete2 


Ada fromJson dan tojson 
fromjJson ini akan dipakai ketika aplikasi kita dijalankan 
ketika aplikasi jalankan diakan load data terakhir berupa json 
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& molor bicdart + 
@overr1ae 


Color get initialState => Colors.amberj: 


@override 
StreamcColor?» mapEventToState(ColorEvent event) async* 4 
yield (event = ColorEvent.to amber) ? Colors.amber : Colors.lightBlue: 


} 


override 
Color fromJson(Map<String, > json) { 


return null; 


} 


override 
Map<String, > toJson(Color state) { 


return null; 


} 


CALL tuuc v 


[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 

Ibloc blocflutterpackagel flutter packages get 

Running "flutter pub get" in bloc blocflutterpackage ... 
exit code 0 


05:11 10:14 


Ketika kita mau melakukan perubahan terhadap state kita dia akan save lagi bentuk 
json dia akan memangil method toJson 

Sekarang kita pasang 

Tipe map nya string to dynamic 

Lalu save di tojson maka map String to integer bukan colors karena color tidak bisa 
disimpan kedalam json jadi terpakasa kita ubah kedalam integer dahulu 
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« ? mapEventToState event) async* i 
jeld (event — .to amber) ? .amber : .lightBlue: 


fromJson « 


return 


? toJson 


Fumer 


[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 

[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 


05:52 
b| m m» iit 3 


SA 
Pertama kita implemen dulu tojson 
Maka disni 
Buat try catch 
Di try kita return kembalikan map string to integer 
Kita kasih key terserah diberikan kalau ini color : jadi si state itu adalah color 
sekarang yg digunakan yaitu ember ata blue 
Ini tidak bisa disave kedalam bentuk json maka kita ubah jadi integer .value dia 
akan mengunah integer 


Sekarang ke fromJson 

Try catch 

Kalau dia gagal atau tidak ada save maka akan kembalikan null 

Kalau ada dia akan kemablikan kedalam json 

Kasih value nya color sebernanya intger oleh krena itu buat as int 
Untuk ubah int ke colors lagi itu mudah tingal 

Berikan color() lalu masukan value untuk ubah integer ke color kembali 
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& wio bocan o 
aoverrıde 
Stream<Color> mapEventToState(ColorEvent event) async* { 

yield (event = ColorEvent.to amber) ? Colors.amber : Colors.lightBlue; 


} 


@override 
Color fromJson(Map<String, dynamic> json) { 
try { 
return Color(jsonl ' ') as int); 
) catch (_) 1 
return null; 
} 
} 


override 
Map<String, int> toJson(Color state) { 
try { 
return ('color': state.value); 
} catch (0) 4 


return null: 


Ibloc blocflutterpackagel flutter packages get 

Running "flutter pub get" in bloc blocflutterpackage ... 
exit code 0 

Ibloc blocflutterpackagel flutter packages get 

Running "flutter pub get" in bloc blocflutterpackage ... 
exit code 0 


07:48 10:14 
p Ke DI 


Lalu ke atas 

Di initialState kita perlu cek dulu apakah ada save sebelumnya 

Maka buat super.initial state tanda tanya dua kali 

Maksud nya apaka untuk cek apakah super initial state nul atau tidak kalau tidak 
dia akan kemablikan ini 

Kalau hasilnya null dia akan kembalikan colors. Ember 
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enum ColorEvent to amber, to light blue 


class ColorBloc extends HydratedBlocs«ColorEvent, Color» 
@doverride 
Color get initialState => super.initialState ? Colors.amber: 


@override 
StreamsColor? mapEventToState(ColorEvent event) async* { 
yield (event = ColorEvent.to amber) ? Colors.amber : Colors.lightBlue: 


} 


override 
Color fromJson(Map<String, dynamic> json) { 


try { 

return Color(json[ Jas int); 
} catch (_) 1 

return null; 


} 


J 


CALL tuuc v 


[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 

[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 


>] mm» KINE SSX 4 -a 
Ke main dart kita perlu ubah sedikit 
Kita import dulu bloc dart 


Dan satu hyrade bloc 
Disini main tingal buat blocSupervisor.delegate — await ganti dgn hy.build; 
Disni kasih async 
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— import 
import 
import 
import 
import 


void main async 
BlocSupervisor.delegate = await HydratedBlocDelegate.build(); 
runApp(MyApp( )): 


class MyApp extends StatelessWidget 
@override 
Widget build(BuildContext context) { 
return MaterialApp( 
home: BlocProvidercColorBloc?» 
builder: (context) => ColorBloc(), child: MainPage()), 
)3 , r F 
} 


CALL tuuc v 


[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 

[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 


09:11 10:14 


lalu jalankan 
Terahir warna biru 
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import 
import 
import 
import 
import 


void main() async 
BlocSupervisor.delegate = await HydratedBlocDel te.build( 
runApp(MyApp( )): 


class MyApp extends StatelessWidget 
@doverride 
Widget build(BuildContext context) 4 


return MaterialApp( 
home: BlocProvidercColorBloc? 


builder: (context) => ColorBloc(), child: MainPage() 
); MaterialAj 
} 


[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc blocflutterpackage ... 
exit code 0 

[bloc_blocflutterpackage] flutter packages get 

Running "flutter pub get" in bloc_blocflutterpackage ... 
exit code 0 


09:24 10:14 


TEZCAN mE 0 
Dan coba close lalu buka lagi 
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BLoC dengan flutter bloc 


main() asyne 
.delegate = await „build 
runApp ()); 


315 


build context 


home: « > package:bloc 


builder: (context) => , child: 


Ibloc blocflutterpackage) flutter packages get 


Running "flutter pub get" in bloc blocflutterpackage ... 
exit code 0 


Ibloc blocflutterpackagel flutter packages get 


Running "flutter pub get" in bloc blocflutterpackage ... 
exit code 0 


09:36 


Ih Ke DI 5 
Tetap biru 
Seakrang bisa save satet kita terakhir 


Sbarnya untuk save seperti ini kita mengunkan bloc biasa lalu digabung shared p 
Cuman pakai hydrated bloc ini semua menjadi otomatis memudah kan kita 


